import React, { Component } from 'react'

export default class App extends Component {
  // 受控表单：表单的 value 收到了状态的控制，视图中 value 的修改又会影响到状态/数据
  // 目的：通过受控的方式收集表单的数据
  state = {
    username: '',
    // #1 定义状态
    content: '',
  }
  handleInput = (e) => {
    this.setState({ username: e.target.value })
  }
  handleTextArea = (e) => {
    // #3 监听 onChange 事件，把输入的内容给 username 状态
    this.setState({ content: e.target.value })
  }
  render() {
    return (
      <ul>
        <li>
          <label htmlFor='username'>用户名：</label>
          <input
            id='username'
            type='text'
            value={this.state.username}
            onChange={this.handleInput}
          />
        </li>
        <li>
          <label htmlFor='content'>其他信息：</label>
          {/* #2 把状态和 textarea 的 value 属性进行绑定 */}
          <textarea
            id='content'
            value={this.state.content}
            onChange={this.handleTextArea}
          ></textarea>
        </li>
      </ul>
    )
  }
}
